<template>
  <div class="password-strength">
    <div v-for="(item, index) in list" :key="index" class="item">
      <div
        class="line"
        :style="{
          background: index <= activeIndex - 1 ? list[activeIndex - 1].color : defaultColor,
          opacity: activeIndex && index <= activeIndex - 1 ? item.opacity : 1,
        }"
      ></div>
      <!--      <div-->
      <!--        v-if="list[activeIndex - 1]"-->
      <!--        class="text"-->
      <!--        :style="{ color: index <= activeIndex - 1 ? list[activeIndex - 1].color : defaultColor, opacity: item.opacity }"-->
      <!--      >-->
      <!--        <div v-if="index === activeIndex - 1">{{ item.label }}</div>-->
      <!--      </div>-->
    </div>
    <div class="result-text" :style="{ color: list[activeIndex - 1].color }">{{ list[activeIndex - 1].label }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

import { getPwdStrength } from './data';

const props = defineProps({
  // 实际的值
  value: {
    type: String,
    default: '',
  },
  // 界限 默认中等强度
  limit: {
    type: Number,
    default: 2,
  },
});

const defaultColor = ref('#C6CED9');
// const errorBg = '#E30001'; // 未达到界限时的背景颜色
// const errorColor = '#EE6363'; // 未达到界限时的字体颜色
// const activeBg = '#EFB014'; // 达到界限时的背景颜色
// const activeColor = '#EFB014'; // 达到界限时的字体颜色
const activeIndex = ref(0);
// 对于激活的密码强度背景色
const list = ref([
  { label: '弱', value: 1, opacity: '1', color: '#E95A6F' },
  { label: '中', value: 2, opacity: '1', color: '#F9CF48' },
  { label: '强', value: 3, opacity: '1', color: '#428FFC' },
  { label: '极强', value: 4, opacity: '1', color: '#4AC99B' },
]);

watch(
  () => props.value,
  (val: any) => {
    activeIndex.value = getPwdStrength(val);
  },
  { immediate: true },
);
</script>

<style lang="less" scoped>
.password-strength {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: auto;

  .item {
    width: calc((100% - 30px) / 4);
    display: flex;
    justify-content: center;
    flex-direction: column;

    & + .item {
      margin-left: 10px;
    }

    .line {
      width: 100%;
      height: 5px;
    }

    .text {
      height: 22px;
      font-size: 14px;
      text-align: center;
    }
  }

  .result-text {
    font-size: 12px;
    line-height: 20px;
    margin-left: 8px;
    flex-shrink: 0;
  }
}
</style>
